<%--
  Created by IntelliJ IDEA.
  User: 94988
  Date: 2019/10/30
  Time: 14:08
  To change this template use File | Settings | File Templates.
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>车位管理</title>
    <%--导入jquery--%>
    <script type="text/javascript" src="<c:url value="/res/tool/layui/layui.js"/>"  charset="utf-8"></script>

    <link type="text/css" href="<c:url value="/res/tool/layui/css/layui.css"/> "  rel="stylesheet"/>

    <%--导入jq--%>
    <script type="text/javascript" src="<c:url value="/res/js/jquery-3.4.1.js"/> " charset="utf-8"></script>
    <script type="text/javascript" src="<c:url value='/res/js/vue.min.js'/> "></script>
    <%--导入axios--%>
    <script type="text/javascript" src="<c:url value='/res/js/axios.min.js'/> "></script>

</head>


<div class="layui-card">
    <form class="layui-form" action="<%=request.getContextPath()%>/parking" method="post">
    <div class="layui-card-header">房屋租赁管理/ 车位管理
       </div>

    <div class="layui-card-body">
        <h2>车位管理</h2>
<hr/>

    单位名称：<input name="bname" type="text" class="layui-input" style="width: 250px;font-size:small;
        display: inline;" placeholder="请输入"> &emsp;
    车位类型：<select name="type" lay-ignore class="layui-input" style="display: inline;width: 250px;" >
        <option value="">请选择</option>
        <option value="0">固定车位</option>
        <option value="1">临时车位</option>

    </select>

        <button  class="layui-btn layui-btn-normal layui-btn-sm" lay-submit  lay-filter="select">查询</button>

        <button  class="layui-btn layui-btn-primary layui-btn-sm"  onclick="cz()">重置</button><br><br>
    </div>
    </form>
<%--    <input  type="button" value=" + 新增" onclick="">&emsp;--%>
    <div>
        <button id="xz" type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="newr" >+ 新增</button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">收费汇总表</button>&emsp;
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">收费明细表</button>&emsp;
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="sfqueren()">收费确认</button>&emsp;
        <button type="button" id="del" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="">删除</button>


<table id="demo" lay-filter="test"></table>

</div>
</div>
<div id="app">
<div id="updateChewei" hidden="hidden">
    <form class="layui-form" action="addChewei" method="post">
        <input type="hidden" name="id" v-model="chewei.cheweiID"/>
        <div class="layui-form-item">
            <label class="layui-form-label">车位类型:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" v-model="chewei.type" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属单位:</label>
            <div class="layui-input-inline">
                <select name="type" lay-ignore class="layui-input"  >
                    <option value="">请选择</option>
                    <option value="0">固定车位</option>
                    <option value="1">临时车位</option>

                </select>
<%--                <select name="budingid" v-model="chewei.budingid" lay-filter="selectbid" lay-verify="required">--%>
<%--                    <option></option>--%>
<%--                    <c:forEach items="${bs}" var="buding">--%>
<%--                        <option value="${buding.id}">${buding.name}</option>--%>
<%--                    </c:forEach>--%>
<%--                </select>--%>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人:</label>
            <div class="layui-input-inline">
                <input type="text" name="type" v-model="chewei.userid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
<%--        <div class="layui-form-item">--%>
<%--            <label class="layui-form-label">联系电话:</label>--%>
<%--            <div class="layui-input-inline">--%>
<%--                <input type="text" name="phone" v-model="chewei.phone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">--%>
<%--            </div>--%>
<%--        </div>--%>

        <div class="layui-form-item">
            <label class="layui-form-label">车型:</label>
            <div class="layui-input-inline">
                <input type="text" name="mianji" v-model="chewei.cartype" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车牌号:</label>
            <div class="layui-input-inline">
                <input type="text" name="mianji" v-model="chewei.number" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateChewei">立即修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<%--添加修改表单弹出层--%>

<div id="postChewei" hidden="hidden">
    <form class="layui-form" action="addChewei" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">房间名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">归属楼栋:</label>
            <div class="layui-input-inline">
                <select name="budingid" lay-filter="selectbid" lay-verify="required">
                    <option></option>
                    <c:forEach items="${bs}" var="buding">
                        <option value="${buding.id}">${buding.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间类型:</label>
            <div class="layui-input-inline">
                <input type="text" name="type" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间面积:</label>
            <div class="layui-input-inline">
                <input type="text" name="mianji" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间描述:</label>
            <div class="layui-input-inline">
                <textarea name="info" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addChewei">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</div>
</body>
<script src="<c:url value="/res/tool/layui/layui.js"/>"></script>
<script type="text/javascript">
    layui.use(['element','form','table','layer','laypage'],function () {
        var table = layui.table;

        var element=layui.element;
        var layer=layui.layer;
        var laypage=layui.laypage;
        var form=layui.form;
        //表单提交添加房间监听
        form.on('submit(addChewei)',function (data) {
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var chewei = data.field;
            axios.post('addChewei',chewei)
                .then(function (value) {
                    if(value.data){
                        location.reload();
                    }
                }).catch(function (reason) {
                layer.alert("添加失败");
                console.log(reason);
            })
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
        //表单提交添加房间监听
        form.on('submit(addChewei)',function (data) {
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var chewei = data.field;
            axios.post('addChewei',chewei)
                .then(function (value) {
                    if(value.data){
                        location.reload();
                    }
                }).catch(function (reason) {
                layer.alert("添加失败");
                console.log(reason);
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })


        //表单修改房间信息监听
        form.on('submit(updateChewei)',function (data) {
            var json = data.field;
            axios.post('updateChewei',json)
                .then(function (value) {
                    if(value.data){
                        location.reload();
                    }
                }).catch(function (reason) {
                layer.alert("修改失败");
                console.log(reason);
            })
            return false;
        })
        //第一个实例
        table.render({
            elem: '#demo'
            ,method:'post'
            ,height: 312
            ,url: '<%=request.getContextPath()%>/table' //数据接口
            ,where: {
                <c:if test="${!empty bname}">"bname":'${bname}',</c:if>
                <c:if test="${!empty type}">"type":${type}</c:if>

            }
            ,id:'rlist'
            ,page: {//是否显示分页
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , limit: 5 //一页显示多少条
                , limits: [5, 10, 15]//每页条数的选择项
                , groups: 2 //只显示 2 个连续页码
                , first: "首页" //不显示首页
                , last: "尾页" //不显示尾页
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res);
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": ${count}, //解析数据长度
                    "data": res //解析数据列表
                };
            }

            ,cols: [[ //表头
                { field: 'id',width:80, sort: true, fixed: 'left',type:"checkbox"},
                {field: 'id', title: '联系人', width:80, sort: true,hide:"true"},
                {field: 'type', title: '车位类型', width:120, sort: true, fixed: 'left'}
                ,{field: 'buding', title: '所属单位', width:120,sort:true}
                ,{field: 'user', title: '联系人', width:80, sort: true}
                ,{field: 'phone', title: '联系电话', width:140,sort:true}
                ,{field: 'cartype', title: '车型', width: 120,sort:true}
                ,{field: 'carnumber', title: '车牌号', width: 120, sort: true}
                ,{field: 'sday', title: '开始日期', width: 150, sort: true}
                ,{field: 'eday', title: '结束日期', width: 150,sort:true}
                // ,{field: 'classify', title: '操作', width: 240,align:'center'}
                ,{fixed: 'right', width:230,title: '操作', align:'center', toolbar: '#barDemo'}
            ]]
        });
        //复选框监听
        table.on('checkbox(test)', function(obj){
            console.log(obj.checked);//当前是否选中状态
            //获取数据id   zulin id
            var layer = layui.layer;
            var id=new Array();
            id= obj.data.cheweiID
            if(obj.checked==true){//选中复选框


                //删除按钮点击

                var id=obj.data.cheweiID;
                console.log(obj.data);
                console.log(id);

                $("#del").click(function () {

                    $.ajax({
                        type:"post",
                        traditional: true,
                        url:"<%=request.getContextPath()%>/del",
                        data:{
                            "id":id//将id传给后台
                        },
                        dataType:"json",
                        success:function (result) {
                            window.location.reload();
                            layer.msg('成功');

                        },

                    });




                });
                    // }else {
                    //
                    //     layer.open({
                    //         type: 1,
                    //         content: '请选择数据' //这里content是一个普通的String
                    //     });
                    // }
                }
            })

            // console.log(obj.data.fjid);
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        //监听工具条
        // table.render({
        //     id:'rlist'
        // });
        var vue=new Vue({
            el:"#app",
            data: {
                bs: {},
                chewei: {
                    "cheweiID": "",
                    "type": "",
                    "budingid": "",
                    "userid": "",
                    "phone": "",
                    "cartype": "",
                    "number": "",
                    "startday": "",
                    "endday": "",
                }
            },
            methods:{
                newr:function () {
                    layer.open({
                        type:1,
                        area:'410px',
                        title:"添加房间/店铺",
                        content:$("#postChewei")
                    })
                },

            },
            updated:function () {
                form.render();
            }
        });

          table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                layer.confirm('确定删除选择的行？', function(index){

                    //向服务端发送删除指令
                    var arr=new Array();
                    arr[0]=data.cheweiID;
                    axios.post('delChewiById',{
                        ids:arr
                    }).then(function (value) {
                        if(value.data){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                    }).catch(function (reason) {
                        layer.close(index);
                        layer.alert("删除失败");
                        console.log(reason);
                    })

                });
            } else if(layEvent === 'edit') { //编辑
                var cheweiID = data.cheweiID;
                axios.get('getCheweiById?id='+cheweiID)
                    .then(function (value) {
                        vue.chewei=value.data;
                        layer.open({
                            type:1,
                            area:'410px',
                            title:"修改房间信息",
                            content:$("#updateChewei")
                        });
                    })

            }
        });
        });












</script>
<script type="text/html" id="barDemo">
    <a style="color: #1E9FFF;font-size: 13px;cursor: pointer;" lay-event="edit">编辑</a>&ensp;
    <a style="color: #1E9FFF;font-size: 13px;cursor: pointer;" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    function sfqueren() {
        alert("收费成功")
    }
    function addchewei() {

    }
    function cz() {
        window.location.reload();

    }
</script>
</html>
